<template>
	<view class="footer">
		<view class="type">
<!-- 			<text class="blue" @click="tologin()">一键登录</text>
			<text class="line">|</text> -->
			<text class="blue" @click="$utils.redirectTo('/login/phone-login')">手机登录</text>
			<text class="line">|</text> 
			<text class="blue" @click="$utils.redirectTo('/login/login')">密码登录</text>
		</view>
		<view class="info"><u-checkbox v-model="loginChecked" shape="circle" class="login-checkbox" @change="checkedClick"></u-checkbox>登录即表明同意 <text class="blue" @click="$utils.navigateTo('/agreement/agreement',{id:3})">用户协议</text></view>
	</view>
</template>		
 	
<script>
import { mapGetters } from "vuex";
// 一键登录参数
const v_univerifyStyle =  {
	"fullScreen": "true", // 是否全屏显示，默认值： "false"
	"backgroundColor": "#ffffff",  // 授权页面背景颜色，默认值：#ffffff
	"backgroundImage": "", // 全屏显示的背景图片，默认值："" （仅支持本地图片，只有全屏显示时支持）  
	"icon": {  
		"path": "static/logo.png" // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo   
	},  
	"phoneNum": {  
		"color": "#202020"  // 手机号文字颜色 默认值：#202020  
	},  
	"slogan": {  
		"color": "#BBBBBB"  //  slogan 字体颜色 默认值：#BBBBBB  
	},  
	"authButton": {  
		"normalColor": "#B00E0E", // 授权按钮正常状态背景颜色 默认值：#3479f5  
		"highlightColor": "#ce1010   ",  // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）  
		"disabledColor": "#b07676",  // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）  
		"textColor": "#ffffff",  // 授权按钮文字颜色 默认值：#ffffff  
		"title": "本机号码一键登录", // 授权按钮文案 默认值：“本机号码一键登录”  
		"borderRadius": "24px"    // 授权按钮圆角 默认值："24px" （按钮高度的一半）
	},
	"otherLoginButton": {  
		"visible": "true", // 是否显示其他登录按钮，默认值：true  
		"normalColor": "", // 其他登录按钮正常状态背景颜色 默认值：透明 
		"highlightColor": "", // 其他登录按钮按下状态背景颜色 默认值：透明 
		"textColor": "#656565", // 其他登录按钮文字颜色 默认值：#656565  
		"title": "其他登录方式", // 其他登录方式按钮文字 默认值：“其他登录方式”  
		"borderColor": "",  //边框颜色 默认值：透明（仅iOS支持）  
		"borderRadius": "0px" // 其他登录按钮圆角 默认值："24px" （按钮高度的一半）
	},  
	"privacyTerms": {  
		"defaultCheckBoxState":"false", // 条款勾选框初始状态 默认值： true   
		"textColor": "#BBBBBB", // 文字颜色 默认值：#BBBBBB  
		"termsColor": "#25d", //  协议文字颜色 默认值： #5496E3  
		"prefix": "我已阅读并同意", // 条款前的文案 默认值：“我已阅读并同意”  
		"suffix": "并使用本机号码登录", // 条款后的文案 默认值：“并使用本机号码登录”  
		"privacyItems": [  
			// 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效  
			{  
				//"url": '/pages/agreement/agreement?id=3', // 点击跳转的协议详情页面 
				"url": 'https://www.txzh.com.cn/?act=article&id=3',
				"title": "用户协议" // 协议名称  
			}  
		]  
	},
	"buttons": {  // 自定义登陆按钮
	  "iconWidth": "45px", // 图标宽度（高度等比例缩放） 默认值：45px
	  "list": [
		{
		  "provider": "apple",
		  "iconPath": "/static/apple.png" // 图标路径仅支持本地图片
		}, 
		{
		  "provider": "weixin",
		  "iconPath": "/static/wechat.png" // 图标路径仅支持本地图片
		}
	  ]
	}
}
export default {
	name:"Footer",
	// props:{
	// 	loginChecked: {
	// 		type: Boolean,
	// 		default: false
	// 	}
	// },
	data() {
		return {
			username: '',
			password: '',
			title: 'login',
			providerList: [],
			phoneNumber: '',
			univerifyBtnLoading: false,
			loginChecked: false
		}
	},
	computed: mapGetters(['isLogin', 'userInfo', 'city']),
	onLoad() {
		// 一键登录
		uni.getProvider({
			service: 'oauth',
			success: (result) => {
				this.providerList = result.provider.map((value) => {
					let providerName = '';
					switch (value) {
						case 'univerify':
							providerName = '一键登录'
							break;
					}
					return {
						name: providerName,
						id: value
					}
				});
			},
			fail: (error) => {
				console.log('获取登录通道失败', error);
			}
		});
		if (this.hasLogin && this.isUniverifyLogin) {
			this.getPhoneNumber(uni.getStorageSync(univerifyInfoKey)).then((phoneNumber) => {
				this.phoneNumber = phoneNumber
			})
		};
	},
	created(){
		//判断是否登录
		// if(this.isLogin){
		// 	this.$utils.switchTab('/index/index');
		// }
	},
	methods: {
		tologin() {
			uni.showLoading({
			                    title: '加载中'
			                });


			this.univerifyBtnLoading = true;
			// 一键登录已在APP onLaunch的时候进行了预登陆，可以显著提高登录速度。登录成功后，预登陆状态会重置
			uni.login({
				provider: 'univerify',
				univerifyStyle:  v_univerifyStyle,
				success: async (res) => {
					uni.hideLoading()
					// 在得到access_token后，通过callfunction调用云函数
					uniCloud.callFunction({
					  name: 'getPhoneNumber', // 你的云函数名称
					  data: {
						'access_token': res.authResult.access_token, // 客户端一键登录接口返回的access_token
						'openid': res.authResult.openid // 客户端一键登录接口返回的openid
					  }
					}).then(res => {
						console.log(res);
						if(res.result.data.list.err == 1){
							this.Toast({
								title: res.result.data.list.msg
							})
						}else{
							uni.setStorageSync('token', res.result.data.list.token);
//									this.$utils.redirectTo('index/index');
							
							this.$store.commit('PUBLICLOGIN', res.result.data);
							this.$utils.switchTab('/index/index');
							
							uni.closeAuthView(); 
							this.Toast({
								title: '登录成功'
							})
						}
					  // res.result = {
					  //   code: '',
					  //   message: ''
					  // }
					  // 登录成功，可以关闭一键登录授权界面了
					}).catch(err=>{
					  // 处理错误
					})
					 
					// 更新保存在 store 中的登录状态
					this.login('univerify');
		
					// #ifdef APP-PLUS
					this.setUniverifyLogin(true)
						this.loginByUniverify('univerify', res)
					// #endif
				},
				fail: (err) => {
					uni.hideLoading()
					console.log('login fail:', err);
					// 一键登录点击其他登录方式
					if (err.code == '30002') {
						uni.closeAuthView();
						/*this.Toast({
							title: '其他登录方式'
						})*/
						return;
					}
		
					// 未开通
					if (err.code == 1000) {
						uni.showModal({
							title: '登录失败',
							content: `${err.errMsg}\n，错误码：${err.code}`,
							confirmText: '开通指南',
							cancelText: '确定',
							success: (res) => {
								if (res.confirm) {
									setTimeout(() => {
										plus.runtime.openWeb('https://ask.dcloud.net.cn/article/37965')
									}, 500)
								}
							}
						});
						return;
					}
		
					// 一键登录预登陆失败
					if (err.code == '30005') {
						uni.showModal({
							showCancel: false,
							title: '预登录失败',
							content: err.metadata.resultMsg
						}); 
						return;
					}
		
					// 一键登录用户关闭验证界面
					if (err.code != '30003') {
						
						uni.showModal({
							showCancel: false,
							title: '登录失败',
							content: JSON.stringify(err)
						});
					}
				},
				complete: () => {
					this.univerifyBtnLoading = false;
				}
			});
		},
		loginByUniverify(provider, res) {
			this.setUniverifyLogin(true);
			uni.closeAuthView();
			const univerifyInfo = {
				provider,
				...res.authResult,
			}
			this.getPhoneNumber(univerifyInfo).then((phoneNumber) => {
				this.phoneNumber = phoneNumber;
				uni.setStorageSync(univerifyInfoKey, univerifyInfo)
			}).catch(err => {
				uni.showModal({
					showCancel: false,
					title: '手机号获取失败',
					content: `${err.errMsg}\n，错误码：${err.code}`
				})
				console.error(res);
			})
		},
		// 登录协议-提交事件父组件
		checkedClick(){
			this.$emit('checkedClick',!this.loginChecked);
		}
	}
}
</script>

<style lang="scss" scoped>
.footer{
	position:fixed;
	bottom:100rpx;
	left:0;
	width:100%;
	text-align: center;
	color:#999;
	.line{
		margin:0 20rpx;
	}
	.info{
		margin-top:30rpx;
		.blue{
			margin-left:10rpx;
		}
	}
	.login-checkbox{
		vertical-align: middle;
		width:48rpx;
	}
}
</style>